<template>
  <div class="zhiboxitong">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <!-- <div class="flexb">
            <div class="flex">
              <el-button type="danger" size="medium" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu')">发布直播销售页</el-button>
              <el-button type="danger" size="medium" @click="log = true">根据已有直播页创建</el-button>
            </div>

            <div style=" padding-right: 20px; line-height: 36px; font-size: 14px; cursor: pointer; color: #409EFF;" @click="logz = true">直播投放流程</div>
          </div> -->
          <div style="background: rgb(218, 231, 245); padding: 15px 20px; font-size: 14px; margin-bottom: 20px;display:flex;border-radius:10px;width:99%">
              <img src="../../static/img/bluelogo.png" class="jinggao_image" alt="">
              <div>目前支持抖音、快手小程序，您需要申请小程序并加白审核然后申请支付能力，完成后在此处添加小程序，</div>
            <span style="color: #3158F1; cursor: pointer; margin-right: 20px;" @click="downall('/web/static/douyinxiaochengxu.pdf','抖音小程序配置说明文档')">抖音小程序配置说明文档</span>
            <span style="color: #3158F1; cursor: pointer;" @click="downall('/web/static/kuaishouxiaochengxu.pdf','快手小程序配置说明文档')">快手小程序配置说明文档</span>
          </div>
          <div class="button_flex">
          <div style="margin-bottom: 20px;display: flex;font-weight:bold;font-size:20px;">我的小程序</div>
          <div class="button_flex_son">
            <router-link v-if="list.length>0" to="/zhiboxitong/xiaochengxu/gongxiang">
              <el-button style="margin-right:20px;border-radius: 12px;" size="large">共享小程序</el-button>
            </router-link>
            <el-button @click="add" style="border-radius: 12px;background:#F72C50;border:none;color:white">添加小程序</el-button>
          </div>
          </div>
          <div class="flex layout" style="background:#F8F9FD;border-top-left-radius: 20px;margin-top:20px;padding: 20px 0 0 0;">
            <div class="xiaochengxuli flexc position_one" v-for="item in list" :key="item.id">
              <div><img :src="item.app_img" class="image_raduis"/></div>
                <div class="main_content">
                <div class="main_bt" style="margin-bottom: 10px; color: #545454; font-size: 18px;font-weight:bold;">{{item.app_name}}</div>
                <div class="main_title" style="color:#666666">主体：{{item.app_com}}</div>
                </div>
                <div v-if="item.type == 1" class="t_type_xcx_box">
                  <div  v-if="item.is_auth == 1" class="t_type_btn" style="">已授权</div>
                  <div v-if="item.is_auth == 0" class="t_type_btn" style="">未授权</div>
                  <!-- <div class="t_type_btn" style="background-color: #C0C0C0;">未发布</div>
                  <div class="t_type_btn" style="background-color: #F4C616;">审核中</div>
                  <div class="t_type_btn" style="background-color: #AA0808;">审核失败</div>
                  <div class="t_type_btn" style="background-color: #28CBCB;">已发布</div> -->
                  <el-button v-if="item.is_auth==0" @click="opensq(item.authorizer_appid
                  ,item.id)" style="width:160px;height:48px;border-radius:40px;font-size:16px;  position: absolute;
                   right: 75px;
                   bottom: 30px;border:1px solid #C4CDF3;color:#335DFF ">前往授权</el-button>
                </div>


                  <div v-if="item.type == 3" >
                    <el-button class="position_btn" @click="toshoplist(item.app_id,'gx')">管理页面</el-button>
                  </div>
                  <!-- 快手 -->
                  <div v-if="item.type == 2" >
                    <el-button  class="position_btn" @click="toshoplist(item.app_id,'pt')" >管理页面</el-button>
                  </div>
                  <div v-if="item.type == 4" >
                    <el-button class="position_btn" @click="toshoplist(item.app_id,'wx')">管理页面</el-button>
                  </div>
                  <!-- 抖音且已支付 -->
                  <div v-if="item.type == 1&&item.is_pay==1" >
                    <!-- 已授权 -->
                    <el-button v-if="item.is_auth==1" class="position_btn" @click="toshoplist(item.app_id,'pt')">管理页面</el-button>
                    <!-- 未授权 -->

                  </div>

                  <!-- <el-button type="danger" size="mini" plain round
                    @click="goid('/zhiboxitong/xiaochengxu/xiaochengxu_fabu',item.app_id)">设置页面</el-button>
                  <el-button type="danger" size="mini"  plain round v-if="item.store_id != null"
                    @click="goid('/zhiboxitong/xiaochengxu/xiaochengxu_shangpin',item.store_id)">管理商品</el-button> -->

              <!-- 抖音 -->
              <!-- <div class="douyin_container" v-if="item.type == 1" style="position: absolute; right: 20px; top: 20px; padding: 5px;">
              </div> -->
              <img src="../../static/img/douyin.png" class="douyin_container" alt="" v-if="item.type == 1"/>
               <!-- 快手 -->
              <!-- <div class="kuaishou_container" v-if="item.type == 2" style="position: absolute; right: 20px; top: 20px;padding: 5px;">
              </div> -->
              <img src="../../static/img/kuaishou.png" class="kuaishou_container" alt="" v-if="item.type == 2"/>
               <!-- 支付宝 -->
              <!-- <div class="zhifubao_container" v-if="item.type == 3" style="position: absolute; right: 20px; top: 20px; padding: 5px;">
              </div> -->
              <img src="../../static/img/zhifubaologo.png" class="kuaishou_container" alt="" v-if="item.type == 3"/>
              <img src="../../static/img/weixinlogo.jpg" class="kuaishou_container" alt="" v-if="item.type == 4"/>
              <div class="parameter_config" style="color: #335DFF;;cursor:pointer;" @click="fix(item)">
                配置参数
              </div>
            </div>
          </div>
          <div style="text-align: right; padding: 10px 0;background:rgba(246,247,252,0.9)">
                   <!-- <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="all.page"
                   :page-sizes="[10,20,30,40]"
                   :page-size="all.page_size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
                   </el-pagination> -->
                      <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="all.page_size"
                @current-change="fanye"
                :total="total">
              </el-pagination>
          </div>


          <!-- <div style="text-align: center; margin-top: 40px;">

          </div> -->

          <div v-if="list2.length>0" style="margin-bottom: 20px;display: flex;font-weight:bold;font-size:20px;margin-top:20px;margin-left:20px;">共享小程序</div>
          <div v-if="list2.length>0"  class="flex tanxinghezi" style="width: 100%;background: #F6F7FC;border-radius:30px 0 0 0">
            <div class="xiaochengxuli flexc" v-for="item in list2" :key="item.id" style="margin-top:30px;">
              <div><img :src="item.app_img"  class="image_raduis"/></div>
              <div style="margin-left: 20px;">
                <div class="main_contents">
                  <div style="margin-bottom: 10px; color: #545454; font-size: 18px;font-weight:bold">{{item.app_name}}</div>
                <!-- <div v-if="item.type == 1" class="t_type_xcx_box">
                  <div  v-if="item.is_auth == 1" class="t_type_btn" style="background-color: #3ECB28;">已授权</div>
                  <div v-if="item.is_auth == 0" class="t_type_btn" style="background-color: #F43B3B;">未授权</div>

                </div> -->
                <div style="margin-bottom: 10px; color: rgb(102, 102, 102);">主体：{{item.app_com}}</div>
                </div>
                <div class="flex">

                  <!-- 快手 -->
                  <div v-if="item.type == 2" >
                    <el-button type="danger" @click="toshoplist(item.app_id,'gx')" class="position_btns">管理页面</el-button>
                  </div>
                  <!-- 抖音且已支付 -->
                  <div v-if="item.type == 1" >
                    <!-- 已授权 -->
                    <el-button  type="danger" @click="toshoplist(item.app_id,'gx')" class="position_btns">管理页面</el-button>
                    <!-- 未授权 -->
                    <!-- <el-button v-if="item.is_auth==0" @click="opensq(item.authorizer_appid,item.id)" type="primary"   size="mini" plain round >前往授权</el-button> -->
                  </div>


                  <!-- <el-button type="danger" size="mini" plain round
                    @click="goid('/zhiboxitong/xiaochengxu/xiaochengxu_fabu',item.app_id)">设置页面</el-button>
                  <el-button type="danger" size="mini"  plain round v-if="item.store_id != null"
                    @click="goid('/zhiboxitong/xiaochengxu/xiaochengxu_shangpin',item.store_id)">管理商品</el-button> -->
                </div>
              </div>
              <img src="../../static/img/douyin.png" class="douyin_container" alt="" v-if="item.type == 1"/>
               <!-- 快手 -->
              <!-- <div class="kuaishou_container" v-if="item.type == 2" style="position: absolute; right: 20px; top: 20px;padding: 5px;">
              </div> -->
              <img src="../../static/img/kuaishou.png" class="kuaishou_container" alt="" v-if="item.type == 2"/>
               <!-- 支付宝 -->
              <!-- <div class="zhifubao_container" v-if="item.type == 3" style="position: absolute; right: 20px; top: 20px; padding: 5px;">
              </div> -->
              <img src="../../static/img/zhifubaologo.png" class="kuaishou_container" alt="" v-if="item.type == 3"/>
              <img src="../../static/img/weixinlogo.jpg" class="kuaishou_container" alt="" v-if="item.type == 4"/>
              <div style="position: absolute; right: 20px; top: 22px; color: #9B9B9B;">
                由{{item.parent_name}}共享
              </div>
            </div>
          </div>
          <!-- <div class="zhiboxitong_table" v-if="list != ''">
            <el-table :data="list" border style="width: 100%" align="center">
              <el-table-column prop='title' label="页面名称"></el-table-column>
              <el-table-column prop='pv' label="PV"></el-table-column>
              <el-table-column prop='uv' label="UV"> </el-table-column>
              <el-table-column prop='saled' label="今日销售"> </el-table-column>
              <el-table-column label="销售页链接" width="160px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="fuzhi(scope.row.id)">复制链接</el-button>
                  <el-button size="mini" type="text" @click="creatQrCode(scope.row.id)">生成二维码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpin',scope.row.id)">管理商品</el-button>
                  <el-button size="mini" type="text" @click="goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu',scope.row.id)">编辑</el-button>
                  <el-button size="mini" type="text" @click="shanchu(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
               :total="total"></el-pagination>
            </div>
          </div> -->
          <!-- <div v-if="list == ''" class="flexcc"
            style="width: 100%; height: 100%; text-align: center; font-size: 20px; line-height: 50px;">
            <div>
              <div>您还未开通小程序功能</div>
              <div>小程序需定制开发，请联系客服开通，目前支持开发:抖音小程序、快手小程序</div>
            </div>

          </div> -->
        </div>
      </div>
    </div>
    <el-dialog title="小程序" :visible.sync="log" width="600px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">小程序类型:</div>
        <div class="r">
          <el-select v-model="all2.type" placeholder="选择已有的直播页">
           <el-option label="抖音小程序" :value="1"></el-option>
           <el-option label="快手小程序" :value="2"></el-option>
           <el-option label="支付宝小程序" :value="3"></el-option>
           <el-option label="微信小程序" :value="4"></el-option>
          </el-select>
        </div>
      </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">小程序名称:</div>
          <div class="r"><el-input v-model="all2.app_name" placeholder="请输入小程序名称"></el-input></div>
        </div>



        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">小程序图标:</div>
          <div class="r">
            <chuantu ref="chuantu" @getimg="getimg" :imgs="all2.app_img" v-if="relo"></chuantu>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">所属主体:</div>
          <div class="r"><el-input v-model="all2.app_com" placeholder="请输入所属主体"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">APPID:</div>
          <div class="r"><el-input v-model="all2.app_id" placeholder="请输入APPID"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">secret:</div>
          <div class="r"><el-input v-model="all2.secret" placeholder="请输入secret"></el-input></div>
        </div>
       <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">pay_salt:</div>
          <div class="r"><el-input v-model="all2.pay_salt" placeholder="请输入pay_salt"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">notify_token:</div>
          <div class="r"><el-input v-model="all2.notify_token" placeholder="请输入notify_token"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div class="z">store_id:</div>
          <div class="r"><el-input v-model="store_id" disabled ></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">应用私钥:</div>
          <div class="r"><el-input v-model="all2.app_private_key" placeholder="请输入应用私钥"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">应用私钥版本:</div>
          <div class="r"><el-input v-model="all2.app_private_key_verson" placeholder="请输入应用私钥版本"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">平台公钥:</div>
          <div class="r"><el-input v-model="all2.platform_public_key" placeholder="请输入平台公钥"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">是否允许录屏:</div>
          <div class="r">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="all2.is_screen_record"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 1">
          <div class="z">群聊id:</div>
          <div class="r"><el-input v-model="all2.group_id" placeholder="请输入群聊id"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 4">
          <div class="z">支付商户号:</div>
          <div class="r"><el-input v-model="all2.mch_id" placeholder="请输入支付商户号"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;" v-if="all2.type == 4">
          <div class="z">支付商户秘钥:</div>
          <div class="r"><el-input v-model="all2.mch_secret_key" placeholder="请输入支付商户秘钥"></el-input></div>
        </div>
        <div style="color: #409EFF;  cursor: pointer; display: flex; align-items: center;" class="down_word">
          <!-- <el-tooltip class="item" effect="dark" content="下载配置说明文档" placement="top-start">
          	<i class="el-icon-question" style="color: #409EFF; font-size: 20px; margin-right: 5px; cursor: pointer;" ></i>
          </el-tooltip> -->
          <img src="../../static/img/word.png" style="width: 20px; margin-right: 5px;" />

          <span v-if="all2.type != 4" style="color: #005AFF; cursor: pointer;" @click="downall('/web/static/xiaochengxupeizhi.pdf','小程序配置说明文档')">
          点此下载配置说明文档
          </span>
          <span v-if="all2.type == 4" style="color: #005AFF; cursor: pointer;" @click="downall('/web/static/xiaochengxupeizhi2.pdf','小程序配置说明文档')">
          点此下载配置说明文档
          </span>
        </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius: 10px;">取消</el-button>
        <el-button type="primary" @click="tongbugo" style="border-radius: 10px;background:#3158F1">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog title="推广二维码" :visible.sync="erweima_log" width="440px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="erweima_log = false">关闭</el-button>
        <el-button type="primary" @click="xiazai">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog title="直播投放流程" :visible.sync="logz" width="600px">
      <img src="../../static/img/toufangliucheng.png" style="max-width: 100%;" />
    </el-dialog>
    <!-- 前往授权 -->
    <el-dialog
      title="抖音小程序授权"
      :visible.sync="showsq"
      width="400px">
      <div style="text-align: center;">
        <div>点击下方链接前往授权</div>
        <el-button style="margin-top: 30px;border-radius: 10px;background:#3158F1" type="primary" @click="tosq">前往授权</el-button>
      </div>
    </el-dialog>
    <!-- 授权结果 -->
    <el-dialog
      title="抖音小程序授权"
      :visible.sync="showsqres"
      width="400px"
      @closed="checksq">

      <div style="text-align: center;">
        <div style="margin-bottom: 30px;">选择授权结果</div>
        <el-button type="primary" @click="showsqres=false" style="margin-top: 30px;border-radius: 12px;background:#3158F1">我已授权成功</el-button>
        <el-button type="info"  @click="showsqres=false" style="margin-top: 30px;border-radius: 12px;">未授权成功</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    name: "zhiboxitong",
    data() {
      return {
        list: [],
        list2: [],
        tongbuall: {
            id: "",
            store_source: "",
            title: ""
        },
        log: false,
        logz: false,
        erweima_log: false,
        all: {
          page: 1,
          page_size: 10
        },
        total:0,
        relo:false,
        all2:{
          type:1,//	0	是	string	1抖音 2快手
          app_id:"",//	ttee8a983771b41cd301	是	string	无
          pay_salt:"",//	mJr72ajtzdCm1aEJZkLXGRVKRvoU7GklXT1KMxop	是	string	无
          notify_token:"",//	luojiweiyenb123	是	string	无
          secret:"",//	400496a168b6b31fe0f9b5aea82f84e5f43c6dd9	是	string	无
          app_img:"",//		是	string	无
          app_name:"",//	app名称	是	string	无
          app_com:"",//	主体	是	string	无
          id:"",//	1	是	string	无
          app_private_key:'',//应用私钥
          app_private_key_verson:'',//应用私钥版本
          platform_public_key:'',//平台公钥
          is_screen_record:'',//是否允许截屏
          group_id:'',//群聊id
          mch_id:'',//支付商户号
          mch_secret_key:''//支付商户秘钥
        },
        store_id:'',
        showsq:false,
        showsqres:false,
        shoulink:'',
        shopid:'',
      }
    },
    beforeCreate() {

    },
    created() {
      this.getlist()
      this.getlist2()
      this.shopid = localStorage.getItem('sc_shopid')
      console.log('+++')
      console.log(this.shopid)
    },
    mounted() {

    },
    methods: {
          fanye:function(val){
      this.all.page = val
      this.getlist()
    },
      //点击授权http://store.91haoka.cn/api/mini/get/auth/url
      opensq(app_id,id){
        this.showsq = true
        axios.get(`${this.apis}/api/mini/get/auth/url`, {
            params: {
              app_id:app_id,
              id:id,
            }
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log(response.data.data)
              this.shoulink = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      //点击前往授权
      tosq(){
        this.showsq = false
        this.showsqres = true
        window.open(this.shoulink)
      },
      //刷新页面，检查授权
      checksq(){
        // alert('--')
        this.getlist()
      },
      //跳转到店铺列表
      toshoplist(app_id,xcxtype){
        this.$router.push({path: '/zhiboxitong/xiaochengxu/xcxstorelist',query: {app_id:app_id,xcxtype:xcxtype}});
      },
      fix:function(item){
        this.all2 = {
          type:item.type,//	0	是	string	0抖音
          app_id:item.app_id,//	ttee8a983771b41cd301	是	string	无
          pay_salt:item.pay_salt,//	mJr72ajtzdCm1aEJZkLXGRVKRvoU7GklXT1KMxop	是	string	无
          notify_token:item.notify_token,//	luojiweiyenb123	是	string	无
          secret:item.secret,//	400496a168b6b31fe0f9b5aea82f84e5f43c6dd9	是	string	无
          app_img:item.app_img,//		是	string	无
          app_name:item.app_name,//	app名称	是	string	无
          app_com:item.app_com,//	主体	是	string	无
          id:item.id,//	1	是	string	无
          app_private_key:item.app_private_key,//	应用私钥
          app_private_key_verson:item.app_private_key_verson,//	 应用私钥版本
          platform_public_key :item.platform_public_key ,//	平台公钥
          is_screen_record:item.is_screen_record,//是否允许截屏
          group_id:item.group_id,//群聊id
          mch_id:item.mch_id,//支付商户号
          mch_secret_key:item.mch_secret_key//支付商户秘钥
        }

        this.store_id = item.store_id

        this.log = true

        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      getimg:function(img){
        this.all2.app_img = img
      },
      add:function(){
        this.all2 = {
          type:1,//	0	是	string	0抖音
          app_id:"",//	ttee8a983771b41cd301	是	string	无
          pay_salt:"",//	mJr72ajtzdCm1aEJZkLXGRVKRvoU7GklXT1KMxop	是	string	无
          notify_token:"",//	luojiweiyenb123	是	string	无
          secret:"",//	400496a168b6b31fe0f9b5aea82f84e5f43c6dd9	是	string	无
          app_img:"",//		是	string	无
          app_name:"",//	app名称	是	string	无
          app_com:"",//	主体	是	string	无
          id:"",//	1	是	string	无
          app_private_key:"",//	应用私钥
          app_private_key_verson:"",//	应用私钥版本
          platform_public_key:"",//	平台公钥
          is_screen_record:"",//是否允许截屏
          group_id:'',//群聊id
          mch_id:'',//支付商户号
          mch_secret_key:''//支付商户秘钥
        }
        this.log = true

        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      tongbugo: function() {

        axios.post(`${this.apis}/api/mini/make`, this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      shanchu: function(id) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`${this.apis}/api/store/delete`, {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
                this.$message.success('已删除');
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      creatQrCode(id) {
        this.erweima_log = true
        this.$nextTick(() => {
          let url = location.origin + '/h5/index.html?id=' + id
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
             text: url, // 需要转换为二维码的内容              width: 400,              height: 400,
             colorDark: '#000000',
             colorLight: '#ffffff',
             correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      xiazai: function() {
        let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
         a.download = 'erweima'; //这边是文件名，可以自定义          a.href = img.src;          document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
      },
      fuzhi: function(id) {
        let url = location.origin + '/h5/index.html?id=' + id
        this.copy(url)
      },
      fanye: function(val) {
        this.all.page = val
        this.getlist()
      },
      getlist: function() {
        axios.get(`${this.apis}/api/mini/list`, {
            params: this.all
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getlist2: function() {
        axios.get(`${this.apis}/api/merchant/minis`)
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('list2==')
              console.log(response.data.data.data)
              this.list2 = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }

    }
  }
</script>
<style scoped>
/deep/ .el-input__inner {
 /* height: 40px; */
 border-radius: 8px;
 }
.main_title{
 margin-bottom: 10px;
 color: #666666;
 font-size: 14px;
}
.image_raduis{
  width: 64px;
  height: 64px;
  position: absolute;
  left: 115px;
  top: 60px;
  border-radius: 15px;

}
.douyin_container{
  position: absolute;
  left: 18px;
  top: 18px;
  width: 60px;
  border-radius: 10px;
  height: 30px;
}
.zhifubao_container{
  position: absolute;
  left: 18px;
  top: 18px;
  width: 60px;
  border-radius: 10px;
  height: 30px;

}
.position_one{
  position: relative;
}
.kuaishou_container{
  position: absolute;
  left: 18px;
  top: 18px;
  width: 60px;
  border-radius: 10px;
  height: 30px;
}
.button_flex{
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
  .button_flex_son{
       display: flex;
       align-items: center;
  }
.t_type_xcx_box{
  /* display: flex; */
  margin-bottom: 10px;
}
.t_type_btn{
  color: #FF4D52;
  font-size: 12px;
  position: absolute;
  right: 90px;
  top: 26px;
}
</style>
<style scoped lang="less">
.jinggao_image{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
  .zhiboxitong {
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-button--danger.is-plain{ background: #fff;}
    /deep/ .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
      background: #fff; color: #F56C6C;
    }
    * {
      box-sizing: border-box;
    }
    .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
    .r{}
    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;
      }

      .right {
        width: calc(100vw - 220px);
        height: 100vh;
        overflow: auto;



        .zhiboxitong_right {
          height: calc(100vh - 90px);
          // overflow: auto;
          background: #fff;
          border-radius: 5px;
          padding: 20px 0 0 20px;

        }

        .zhiboxitong_table {
          margin-top: 20px;
        }
        .tanxinghezi{
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
        .xiaochengxuli {
          background: white;
          margin: 10px;
          padding: 20px;
          width: 300px;
          height: 292px;
          position: relative;
          border-radius: 20px;
          // img {
          //   width: 100px;
          //   height: 100px;
          // }
        }
      }
    }

    .flex {

      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  /deep/ .el-pagination{
  margin-right: 30px;
}
.parameter_config{
  position: absolute;
  right: 20px;
  top: 25px;

}
.content_box{
  width: 100%;
  height: 100px;
  // background-color: pink;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.position_btn{
  border: 1px solid #C4CDF3;
  width: 160px;
  height: 48px;
  border-radius: 40px;
  color: #333333;
  font-size: 16px;
  background: white;
  position: absolute;
  left: 75px;
  bottom: 30px;
}
.position_btns{
  border: 1px solid #C4CDF3;
  width: 160px;
  height: 48px;
  border-radius: 40px;
  color: #333333;
  font-size: 16px;
  background: white;
  position: absolute;
  left: 75px;
  bottom: 20px;
}
.layout{
  display: flex;
  justify-content: space-evenly;
}
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
  .down_word{
    position: absolute;
    right: 50px;
    top: 40px;
  }
  .main_content{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
  }
   .main_contents{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
  }
  /deep/ .el-pagination .el-pager li {
  border-radius: 12px; /* 设置圆角大小 */
  background: white;

}
</style>
